<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="ZXing for JS">

  <title>ZXing TypeScript | Decoding from camera stream</title>

<style>
.scanBox{
	display: none;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
    padding-top: 40px;
	background-color:#efefef;
    text-align: center;
}
#closeBtn{
	position:fixed;
	top:10px;
	right:10px;
}
</style>

</head>

<body>

  <main class="wrapper" style="padding-top:2em">

    <section class="container" id="demo-content">
     
      <div>
        <a class="button" id="scanQRCode">Start</a>
       
      </div>

      <div class="scanBox" id="scanBox">
		<a id="closeBtn">关闭</a>
        <video id="video" width="300" height="500"></video>
      </div>

      <div id="sourceSelectPanel" style="display:none">
        <label for="sourceSelect">Change video source:</label>
        <select id="sourceSelect" style="max-width:400px">
        </select>
      </div>

    
    </section>
  </main>

  <script type="text/javascript" src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
  <script type="text/javascript">
    window.addEventListener('load', function () {
      let selectedDeviceId;
      const codeReader = new ZXing.BrowserMultiFormatReader()
      console.log('ZXing code reader initialized')
      codeReader.listVideoInputDevices()
        .then((videoInputDevices) => {
          const sourceSelect = document.getElementById('sourceSelect')
          selectedDeviceId = videoInputDevices[0].deviceId;
		  console.log(selectedDeviceId);
          

          document.getElementById('scanQRCode').addEventListener('click', () => {
document.getElementById('scanBox').style.display = 'block'
            codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
              if (result) {
                alert('result:'+result);
             
              }
              if (err && !(err instanceof ZXing.NotFoundException)) {
                alert('err1:'+err)
           
              }
            })
            console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
          })
document.getElementById('closeBtn').addEventListener('click', () => {
            codeReader.reset()
            document.getElementById('scanBox').style.display = 'none'
          
          })
        

        })
        .catch((err) => {
           alert('err:'+err)
        })
    })
  </script>

</body>

</html>